<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#divA{
				width: 200px;
				height: 200px;
				background-color: lightsalmon;
				padding: 10px;
			}
			#divB{
				width: 120px;
				height: 120px;
				background-color: lightblue;
				padding: 10px;				
			}
			#divC{
				width: 50px;
				height: 50px;
				background-color: lightcoral;
				padding: 10px;				
			}
		</style>
	</head>
	<body>
		<div id="divA">
			<div id="divB">
				<div id="divC">
					C
				</div>
				B
			</div>
			A
		</div>
		
		
		
		<script>
			// 1. 冒泡(默认 从里到外)
			divA.onclick = function(){
				alert("A被点击了");
			}
			divB.onclick = function(){
				alert("B被点击了");
			}
			divC.onclick = function(){
				alert("C被点击了");
			}
			// 2. 捕获(默认 从外到里)
			divA.addEventListener("click",function(){
				alert("A被点击了");
			})
			divB.addEventListener("click",function(){
				alert("B被点击了");
			})
			divC.addEventListener("click",function(){
				alert("C被点击了");
			})
			
			// 停止处理当前事件
			event.stopPropagation();
			// 取消默认处理（取消某些html元素自己默认）
			event.preventDefault();
			
		</script>
		
		
		
	</body>
</html>
